import React from "react";
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: []
        }
    }
    componentDidMount() {
        this.$axios
            .get(
                "https://apipc-xiaotuxian-front.itheima.net/home/goods"
            )
            .then(res => {
                console.log(res);
                if (res.data.msg == '操作成功') {
                    this.setState({
                        arr: res.data.result
                    });
                }

            });
    }
    render() {
        return <div>
            <div className="home-product" data-v-2833728a="">
                {this.state.arr.map((i, index) => {
                    return <div key={index}
                        className="home-panel"
                        data-v-39dda62a=""
                        data-v-2833728a="">
                        <div className="container" data-v-39dda62a="">
                            <div className="head" data-v-39dda62a="">
                                <h3 data-v-39dda62a="">
                                    {i.name}<small data-v-39dda62a=""></small>
                                </h3>
                                {i.children.map((j, index) => {
                                    return <div key={index}
                                        className="sub"
                                        data-v-2833728a="">
                                        <a href="#" data-v-2833728a="">{j.name}</a>
                                        <a href="#" className="cover" data-v-2833728a=""
                                        ><img alt="" data-v-2833728a="" src={j.picture} /><strong
                                            className="label"
                                            data-v-2833728a=""
                                        ><span data-v-2833728a="">{j.name}馆</span><span data-v-2833728a="">{j.saleInfo}</span></strong></a>
                                    </div>
                                })}
                                <a href="#" className="xtx-more" data-v-d6f2c104="" data-v-2833728a="">
                                    <span data-v-d6f2c104="">查看全部</span>
                                    <i className="iconfont icon-angle-right" data-v-d6f2c104=""></i></a>
                            </div>
                            <div className="box" data-v-2833728a="">

                                <ul className="goods-list" data-v-2833728a="">
                                    {i.goods.map((k, index) => {
                                        return <li data-v-2833728a="" key={index}>
                                            <div className="goods-item" data-v-88714542="" data-v-2833728a="">
                                                <a href="#" className="image" data-v-88714542="">
                                                    <img alt="" data-v-88714542="" src={k.picture} /></a>
                                                <p className="name ellipsis-2" data-v-88714542="">
                                                    {k.name}
                                                </p>
                                                <p className="desc ellipsis" data-v-88714542="">
                                                    {k.desc}
                                                </p>
                                                <p className="price" data-v-88714542="">¥{k.price}</p>
                                                <div className="extra" data-v-88714542="">
                                                    <a aria-current="page"
                                                        href="#"
                                                        className="router-link-active router-link-exact-active"
                                                        data-v-88714542="">
                                                        <span data-v-88714542="">找相似</span>
                                                        <span data-v-88714542="">发现现多宝贝 &gt;</span></a>
                                                </div>
                                            </div>
                                        </li>
                                    })}

                                </ul>
                            </div>
                        </div>
                    </div>
                })}

            </div>
        </div>
    }
}